<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>opacity、visible、display</title>
    <style>
        div {
            height: 200px;
            background-color: black;
            outline: 1px solid #f00;
        }

        .sub {
            height: 30px;
            background-color: green;
            display: block;
            opacity: 1;
            visibility: visible
        }

        .opacity {
            opacity: 0;
        }

        .visible {
            visibility: hidden;
        }

        .display {
            display: none;
        }
    </style>
</head>

<body>

    <div class="display" onclick="console.log(1)">
        不可触发，页面不会渲染改元素。不会为其保留空间
        <div class="sub" onclick="console.log(11)">
            不可触发
        </div>
    </div>
    <div class="opacity" onclick="console.log(2)">
        event事件可以正常执行
        仅页面渲染上呈现透明
        <div class="sub" onclick="console.log(3)">
            修改visible不可见，因为父级不可见
        </div>
    </div>
    <div class="visible" onclick="console.log(21)">
        event 事件将会被暂停执行
        <div class="sub" onclick="console.log(31)">
            可以通过修改visibility是自己可见后正常执行事件，并且可冒泡到父级hidden
        </div>
    </div>
</body>

</html>